<template>
    <div style="background-color: #F0F0F7">
        <el-row>
            <el-col :span="23" class="block" style="padding-left: 15px;">
                <div class="top_total">
                    <span>{{nowTime}}</span>
                    <div class="msg">
                        共乘车<span class="num">{{orderCount}}</span>人次
                        ,实现盈利<span class="num">{{incomeCount}}</span>元
                        <el-button @click="getOrderAndIncomeCount()" type="text" class="el-icon-refresh btn-fullscreen"></el-button>
                        <el-button @click="openScreenPage()" type="text" class="el-icon-full-screen btn-fullscreen"></el-button>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12" class="block">
                <Rank ref="rank"></Rank>
            </el-col>
            <el-col :span="11" class="block">
                <stock ref="stock"></stock>
            </el-col>
        </el-row>
        <el-row>

            <el-col :span="12" class="block">
                <Trend ref="trend"></Trend>
            </el-col>
            <el-col :span="11" class="block">
                <seller ref="seller"></seller>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import Hot from './Hot.vue'
    import Map from './Map.vue'
    import Rank from './Rank.vue'
    import Seller from './Seller.vue'
    import Stock from './Stock.vue'
    import Trend from './Trend.vue'
    export default {
        name: "DataTotal",
        data(){
            return {
                nowTime: new Date(),
                orderCount:0,
                incomeCount:0,
            }
        },
        computed:{

        },
        mounted() {
            this.startInterval();
            this.getOrderAndIncomeCount();
        },
        beforeDestroy() {
            if (this.timer) {
                clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
            }
        },
        components: {
            Hot,
            Map,
            Rank,
            Seller,
            Stock,
            Trend
        },
        methods:{
            openScreenPage() {
                let routeData = this.$router.resolve({
                    path:'/screenPage',
                });
                window.open(routeData.href, '_blank');
            },
            async getOrderAndIncomeCount(){
                await this.axios.get("/chart/totalCount").then(res=>{
                    this.orderCount=res.data[0];
                    this.incomeCount=res.data[1];
                });
            },
            startInterval() {
                this.timer = setInterval(() => {
                    this.nowTime = new Date(); // 每秒修改数据date
                }, 1000);
            }
        },
    }
</script>

<style scoped>
    .block{
        height: 290px;
        margin: 10px;
    }
    .top_total{
        border-radius: 20px;
        background-color: #2f3447;
        text-align: center;
        height: 100%;
        width: 100%;
        color: white;
        font-weight: bold;
    }
    .num{
        font-size: 50px;
    }
    .msg{
        position: relative;
        top: 35%;
    }
    .btn-fullscreen {
        color: white;
    }

</style>
